<template>
  <div class="header-container">
    <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"
      @click="$emit('update:collapsed', !collapsed)" />
    <a-breadcrumb>
      <a-breadcrumb-item>{{ currentFolder }}</a-breadcrumb-item>
      <a-breadcrumb-item><a href="">{{ currentPage }}</a></a-breadcrumb-item>
    </a-breadcrumb>
    <div class="user-info">
      <p>
        欢迎
        <span class="nickname" @click="$router.push({ name: 'space' })">
          <a-icon v-if="checking" style="font-size: 12px;" type="loading" />
          <template v-else>
            {{ username }}
          </template>
        </span>
        <a-icon type="swap" />
      </p>
      <p class="quit" @click="handleQuit">退出</p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  props: {
    collapsed: {
      type: Boolean,
      required: true,
    },
  },
  computed: {
    ...mapState('userInfo', ['checking', 'username']),
    currentFolder() {
      return this.$route.matched[0].meta.title || '';
    },
    currentPage() {
      return this.$route.meta.title || '';
    },
  },
  methods: {
    async handleQuit() {
      await this.$store.dispatch('loginInfo/loginOut');
      this.$router.push({ name: 'login' });
    },
  },
};
</script>

<style lang="less" scoped>
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: #30a679;
  }
}

.header-container {
  height: 100%;
  display: flex;
  align-items: center;
}

.user-info {
  margin-left: auto;
  padding: 0 24px;

  &:hover {
    .quit {
      width: 40px;
    }
  }

  p {
    margin: 0;
    line-height: initial;
    display: inline-block;

    .nickname {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: inline-block;
      vertical-align: bottom;
      margin: 0 10px 0 5px;
      max-width: 80px;
      cursor: pointer;
      transition: .15s;

      &:hover {
        color: #30a679;
        transform: scale(1.1);
      }
    }

    &.quit {
      text-indent: 10px;
      width: 0;
      white-space: nowrap;
      overflow: hidden;
      vertical-align: -3px;
      transition:.15s, width .25s .3s;
      cursor: pointer;

      &:hover {
        color: #30a679;
        transform: scale(1.1);
      }
    }
  }
}
</style>
